<template>
  <div class="app-container2">
    <!--工具栏-->
    <div v-loading="tableloding" class="head-container">
      <el-tabs v-model="titlename">
        <el-tab-pane label="转出人员信息" name="info">
          <content-block label="查询条件">

            <el-form ref="queryForm1" :model="queryForm1" label-width="180px" class="search-form">
              <el-col :span="8">
                <el-form-item label="转出险种" :rules="[ { required: true, message: '转出险种不能为空'},]">
                  <el-select v-model="queryForm1.aae140" placeholder="请选择" style="width:80%" @change="changeAae140">
                    <el-option v-for="item in dict.aae140.filter(m =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="个人编号" :rules="[ { required: true, message: '转出险种不能为空'},]">
                  <el-input v-model="queryForm1.aac001" />
                </el-form-item>
              </el-col>
            </el-form>

            <el-button type="primary" size="mini" icon="el-icon-circle-check" style="float:right;margin-right: 20px" @click="toAdd">保存</el-button>
            <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" style="float:right;margin-right: 20px" @click="resetQuery(1)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery1">搜索</el-button>

          </content-block>
          <content-block label="转出人员支付表信息">
            <el-tabs v-model="activeName">
              <el-tab-pane v-if="tab_visible_110" label="企业转企业" name="tab110_110">
                <el-table ref="table1" v-loading="tableloding1" :data="tableData1" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />

                </el-table>

              </el-tab-pane>
              <el-tab-pane v-if="tab_visible_110" label="企业转机关" name="tab110_120">
                <el-table ref="table2" v-loading="tableloding2" :data="tableData2" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />

                </el-table>
              </el-tab-pane>
              <el-tab-pane v-if="tab_visible_110" label="企业转城乡" name="tab110_170">
                <el-table ref="table3" v-loading="tableloding3" :data="tableData3" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />

                </el-table>
              </el-tab-pane>
              <el-tab-pane v-if="tab_visible_120" label="机关转企业" name="tab120_110">
                <el-table ref="table4" v-loading="tableloding4" :data="tableData4" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />

                </el-table>
              </el-tab-pane>
              <el-tab-pane v-if="false" label="机关转机关" name="tab120_120">
                <el-table ref="table5" v-loading="tableloding5" :data="tableData5" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />

                </el-table>
              </el-tab-pane>
              <el-tab-pane v-if="tab_visible_120" label="改革前试点划转金" name="tab180_180">
                <el-table ref="table6" v-loading="tableloding6" :data="tableData6" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="180px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="180px" />
                </el-table>
              </el-tab-pane>
            </el-tabs>

          </content-block>
        </el-tab-pane>
        <el-tab-pane label="成功列表" name="info2">
          <content-block label="查询条件">

            <el-form ref="queryForm2" :model="queryForm2" label-width="180px" class="search-form">
              <el-row :gutter="20">

                <el-col :span="8">
                  <el-form-item label="转出险种" :rules="[ { required: true, message: '险种'},]">
                    <el-select v-model="queryForm2.aae140" placeholder="请选择" style="width:80%" filterable>
                      <el-option v-for="item in dict.aae140.filter(m =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="表单编号">
                    <el-input v-model="queryForm2.aaz618" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="个人编号">
                    <el-input v-model="queryForm2.aac001" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" style="float:right;margin-right: 20px" @click="resetQuery(2)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery2">搜索</el-button>
          </content-block>
          <content-block label="转出人员支付表信息">

            <el-table ref="table6" v-loading="tableloding7" :data="tableData7" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange" @row-dblclick="handleRowDblClick">

              <el-table-column
                fixed="right"
                label="支付表打印"
                align="center"
                header-align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-printer" size="mini" @click="print(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column prop="aaz618" label="表单编号" align="center" header-align="center" width="300px" />
              <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="300px">
                <template slot-scope="scope">
                  {{ dict.label.aae140[scope.row.aae140] }}
                </template>
              </el-table-column>
              <el-table-column prop="count" label="转出人数" align="center" header-align="center" width="300px" />
              <el-table-column prop="aae719" label="转移金额" align="center" header-align="center" />
            </el-table>
          </content-block>
        </el-tab-pane>
        <el-tab-pane label="交接表明细信息" name="info3">
          <content-block label="查询条件">

            <el-form ref="queryForm3" :model="queryForm3" label-width="180px" class="search-form">
              <el-row :gutter="20">

                <el-col :span="8">
                  <el-form-item label="转出险种" :rules="[ { required: true, message: '险种'},]">
                    <el-select v-model="queryForm3.aae140" placeholder="请选择" style="width:80%">
                      <el-option v-for="item in dict.aae140.filter(m =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="表单编号">
                    <el-input v-model="queryForm3.aaz618" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="个人编号">
                    <el-input v-model="queryForm3.aac001" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" style="float:right;margin-right: 20px" @click="resetQuery(3)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery3">搜索</el-button>
          </content-block>
          <content-block label="转出人员支付表信息">
            <el-table ref="table8" v-loading="tableloding8" :data="tableData8" size="small" border style="width: 100%;" height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
              <el-table-column prop="aaz618" label="表单编号" align="center" header-align="center" width="150px" />
              <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
              <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                <template slot-scope="scope">
                  {{ dict.label.aae140[scope.row.aae140] }}
                </template>
              </el-table-column>
              <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px" />
              <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px" />
              <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
              <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
              <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px" />
              <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
              <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px" />
            </el-table>

          </content-block>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>
</template>

<script>
import ic58api from '@/views/ynsb_comm/ic58/js/transferIc58'

import contentBlock from '@/components/labers/contentBlock.vue'
import crudBasicAc01 from '@/views/ynsb_comm/ac01/basicAc01'

export default {
  name: 'AccountIc58',
  components: { contentBlock },
  dicts: ['aae140', ''],
  data() {
    return {

      queryForm1: {
        aac001: '', // 人员编号
        aae140: '' // 转移制度方向
      },
      queryForm2: {
        aaz618: '', // 人员编号
        aae140: '' // 转移制度方向
      },
      queryForm3: {
        aaz618: '', // 人员编号
        aae140: '', // 转移制度方向
        aac001: '' // 转移制度方向
      },

      selectedRows: [], // 存储选中的行数据
      tableData1: [], //
      tableData2: [], //
      tableData3: [], //
      tableData4: [], //
      tableData5: [], //
      tableData6: [], //
      tableData7: [], //
      tableData8: [], //

      tableloding1: false,
      tableloding2: false,
      tableloding3: false,
      tableloding4: false,
      tableloding5: false,
      tableloding6: false,
      tableloding7: false,
      tableloding8: false,

      tab_visible_110: false,
      tab_visible_120: true,
      tab_visible_180: false,

      activeName: 'tab110_110',
      titlename: 'info',

      page: {
        // 页码
        page: 0,
        // 每页数据条数
        size: 10,
        // 总数
        total: 0
      }
    }
  },
  methods: {

    personRpcCallBack(item) {
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
    },
    search() {
      // 假设查询的数据
      if (this.searchForm.aac001 !== '' && this.searchForm.aac001 !== null) {
        crudBasicAc01.getAc01Ac02({ ...this.searchForm }).then(res => {
          this.cardPerson = res
          const filteredValues = this.cardPerson.filter(item => item.aae140 === '180' && item.aac008 === '1')
          if (filteredValues.length === 0) {
            this.$message('未查询到该人员职业年金有效参保信息')
            return
          }
          this.aaz159 = filteredValues[0].aaz159
          this.aac001 = filteredValues[0].aac001
        })
      }
    },

    changeAae140(val) {
      if (val === '110') {
        this.activeName = 'tab110_110'
        this.tab_visible_110 = true
        this.tab_visible_120 = false
        this.tab_visible_180 = false
      }
      if (val === '120') {
        this.activeName = 'tab120_110'
        this.tab_visible_110 = false
        this.tab_visible_120 = true
        this.tab_visible_180 = false
      }
      if (val === '180') {
        this.activeName = 'tab180_180'
        this.tab_visible_110 = false
        this.tab_visible_120 = false
        this.tab_visible_180 = true
      }
    },

    toAdd() {
      if (this.selectedRows.length === 0) {
        this.$notify({
          title: '请勾选要汇总的数据',
          type: 'error'
        })
        return
      }

      ic58api.save(JSON.stringify(this.selectedRows)).then(res => {
        this.$notify({
          title: '保存成功',
          type: 'success'
        })
        this.titlename = 'info2'
        this.search2()
      })
    },

    // 个人账户打印
    print(row) {
      window.open('http://localhost:8085/jmreport/view/1114795162931339264?token=123456&tenantId=3&aaz618=' + row.aaz618, '_blank')
    },

    // 监听选中变化
    handleSelectionChange(val) {
      this.selectedRows = val
    },

    toQuery1() {
      this.$refs.queryForm1.validate(valid => {
        if (valid) {
          const data = { ...this.queryForm1 }
          data.type = this.activeName

          ic58api.get(JSON.stringify(data)).then(res => {
            if (this.activeName === 'tab110_110') {
              this.tableData1 = res
            } else if (this.activeName === 'tab110_120') {
              this.tableData2 = res
            } else if (this.activeName === 'tab110_170') {
              this.tableData3 = res
            } else if (this.activeName === 'tab120_110') {
              this.tableData4 = res
            } else if (this.activeName === 'tab120_120') {
              this.tableData5 = res
            } else if (this.activeName === 'tab180_180') {
              this.tableData6 = res
            }

            this.tableloding = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    toQuery2() {
      this.tableloding7 = true
      this.$refs.queryForm2.validate(valid => {
        if (valid) {
          const data = { ...this.queryForm2 }
          ic58api.querycount(JSON.stringify(data)).then(res => {
            this.tableData7 = res
            this.tableloding7 = false
          }
          )
        }
      })
    },

    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aaz618 = row.aaz618 // 获取双击的行数据
      this.queryForm3.aaz618 = this.aaz618
      this.titlename = 'info3'
      setTimeout(() => {
        this.toQuery3()
      }, 500) // 延迟1秒后显示弹窗
    },

    toQuery3() {
      this.tableloding8 = true
      this.$refs.queryForm3.validate(valid => {
        if (valid) {
          const data = { ...this.queryForm3 }

          ic58api.querydetail(JSON.stringify(data)).then(res => {
            this.tableData8 = res
            this.tableloding8 = false
          }
          )
        }
      })
    },

    resetQuery(val) {
      if (val === '1') {
        this.queryForm1 = {}
      }
      if (val === '2') {
        this.queryForm2 = {}
      }
      if (val === '3') {
        this.queryForm3 = {}
      }
    },

    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e
      this.toQuery()
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e
      this.page.page = 1
      this.toQuery()
    },
    // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
    dleChangePage(size) {
      if (this.tableData.length === size && this.page.page !== 1) {
        this.page.page -= 1
      }
    }

  }
}
</script>

<style scoped>
.el-table{
  height: calc(100vh - 550px);
  overflow: auto;
}
</style>
